<template>
    <a-tabs id="layout-tabs"
            :tab-bar-gutter="10"
            :tabBarStyle="{ margin: 0 }">
        <a-tab-pane key="home" :closeable="true">
          <template #tab>
                <HomeOutlined class="tab-home" />
            </template>
        </a-tab-pane>
        <a-tab-pane key="order" tab="订单管理"/>
    </a-tabs>
</template>

<script lang="ts" setup>
import {HomeOutlined} from '@ant-design/icons-vue'
</script>

<style scoped>
#layout-tabs{
  background-color: #fff;
  position: relative;
  z-index: 1;
  padding: 0 24px;
}
.tab-home {

  margin-right: 0 !important;
}
:deep(.ant-tabs-tab){
  padding-right: 12px;
  padding-left: 12px;
}
:deep(.ant-tabs-tab-active){
  background-color:#e6f4ff ;
}
</style>